<template>
  <div class="home">
    <div class="card">
      <div class="carditem">
        <div class="totalcount">
         总销售额
          <p>{{objCount.saleTotal|toLocaleStringNum}}</p>
        </div>
        <div class="todaycount">
          今日销售额:{{objCount.sale|toLocaleStringNum}}
        </div>
      </div>
      <div class="carditem">
        <div class="totalcount">
          访问量
          <p>{{objCount.viewsTotal|toLocaleStringNum}}</p>
        </div>
        <div class="todaycount">
          今日访问量:{{objCount.views|toLocaleStringNum}}
        </div>
      </div>
      <div class="carditem">
        <div class="totalcount">
          收藏量
          <p>{{objCount.collectTotal|toLocaleStringNum}}</p>
        </div>
        <div class="todaycount">
          今日订单量:{{objCount.collect|toLocaleStringNum}}
        </div>
      </div>
      <div class="carditem">
        <div class="totalcount">
          支付额
          <p>{{objCount.payTotal|toLocaleStringNum}}</p>
        </div>
        <div class="todaycount">
          今日支付额:{{objCount.pay|toLocaleStringNum}}
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="monthsale">
        <p>月销售额</p>
        <div id="lineplot"></div>
      </div>
      <div class="scale">
        <p>比例分配</p>
         <div id="pieplot"></div>
      </div>
      <div class="latest">
        <p class="title">今日订单</p>
        <div class="ordercontent">
          <div>
            <p>今日订单数</p>
            <span>{{orderCount.curOrderCount}}</span>
          </div>
          <div>
            <p>汇总订单数</p>
            <span>{{orderCount.curCollect}}</span>
          </div>
          <div>
            <p>累计金额</p>
            <span>{{orderCount.curMoney}}</span>
          </div>
        </div>
      </div>
      <div class="newproduct">
        <p class="title">本月订单</p>
        <div  class="ordercontent">
          <div>
            <p>本月订单数</p>
            <span>{{orderCount.collect}}</span>
          </div>
          <div>
            <p>汇总订单数</p>
            <span>{{orderCount.orderCount}}</span>
          </div>
          <div>
            <p>累计金额</p>
            <span>{{orderCount.money}}</span>
          </div>
        </div>
      </div>
      <div class="quickentrance">
        <p class="title">快捷入口</p>
        <el-row class="links">   
          <el-button type="primary"><router-link style="color:#fff" :to="{name:'goodlist'}">产品管理</router-link></el-button>
          <el-button type="primary"><router-link style="color:#fff" :to="{name:'orderlist'}">订单管理</router-link></el-button>
          <el-button type="primary"><router-link style="color:#fff" :to="{name:'advertlist'}">广告管理</router-link></el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data(){
    return {
      objCount:{},
      plotData:{
        x_data:[],
        y_plot:[],
        y_bar:[],
        pie_data:[]
      },
      orderCount:{}
    }
  },
  filters:{
    toLocaleStringNum(val){
      if(!val) return '';
      return val.toLocaleString();
    }
  },
  mounted(){
    this.getHomeCount();
    this.getHomeFormat();
    this.getHomeOrder();
  },
  methods:{
    async getHomeOrder(){
      let res=await this.$api.getHomeOrder();
      this.orderCount=res.data.list;
      // console.log(res);
    },
    async getHomeCount(){
      let res=await this.$api.getHomeCount();
      this.objCount=res.data.data.list;
    },
    async getHomeFormat(){
      let res=await this.$api.getHomeFormat();
      // console.log(res.data.result.data.sale_money);
      let salemoney=res.data.result.data.sale_money;
      salemoney.forEach(item => {
        let pieobj={};
        pieobj['name']=item['name'];
        pieobj['value']=item['num'];
        this.plotData.x_data.push(item['name']);
        this.plotData.y_plot.push(item['total_amount']);
        this.plotData.y_bar.push(item['num']);
        this.plotData.pie_data.push(pieobj);
      });
      this.line(this.plotData.x_data,this.plotData.y_plot,this.plotData.y_bar);
      this.pie(this.plotData.pie_data);
    },
    line(x_data,y_plot,y_bar){
      var chartDom = document.querySelector('#lineplot');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend:{
          data:['销售额','销售量']
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: x_data
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:'销售额',
            data: y_plot,
            type: 'line'
          },
          {
            name:'销售量',
            data: y_bar,
            type: 'bar'
          }
        ]
        
      };

      option && myChart.setOption(option);

    },
    pie(pie_data){
      var chartDom = document.querySelector('#pieplot');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          align:'right',
           pageTextStyle: {
              fontSize: 3
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: pie_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);

    }
  }

}
</script>

<style lang="less" scoped>
  .home{
    .card{
      display: flex;
      padding: 20px 0;
      min-height: 180px;
      justify-content: space-around;
      // align-items: center;
      .carditem
      {
        width: 240px;
        border-radius: 20px;
        font-size:18px;
        color:#fff;
        display: flex;
        flex-direction: column;
        .totalcount{
          flex: 2;
          
          font-weight: 700;
          padding-left: 20px;
          padding-top: 20px;
          border-bottom:2px solid #fff;
          p{
            font-size: 24px;
            padding-left: 5px;
            line-height: 32px;
          }
        }
        .todaycount{
          padding: 15px 0 15px 20px  ;
          flex:1;

        }
      }
      .carditem:first-child{
        background-color: rgb(184, 113, 103);
      }
      .carditem:nth-child(2){
        background-color: rgb(58, 128, 198);
      }
      .carditem:nth-child(3){
        background-color: rgb(166, 75, 158);
      }
      .carditem:last-child{
        background-color: rgb(39, 172, 195);
      }
    }
    .tabs{
      display: grid;
      padding:0 20px;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: 2fr 1fr;
      gap:15px;
      max-height: 400px;
      div{
        border:1px solid #ccc;
        // border-radius: 20px;
        box-shadow: 0 0 5px 3px rgba(0,0,0,0.1);
        
      }
      
      .monthsale{
        display: flex;
        flex-direction: column;
        grid-column: span 2;
        p{
          flex:1 0 30px;
          padding: 10px 0 10px 10px;
          border-bottom: 2px solid #ccc;
        }
        #lineplot{
          flex:9 0 270px;
        // min-height: 400px;
        // background-color: pink;
      }
      }
      .scale{
        display: flex;
        flex-direction: column;
        grid-column: span 1;
        p{
          flex:1 0 30px;
          padding: 10px 0 10px 10px;
          border-bottom: 2px solid #ccc;
        }
        #pieplot{
          flex:9 0 270px;
        // min-height: 400px;
        // background-color: pink;
      }
      }
      div:nth-child(n+3){
        display: flex;
        text-align: center;
        flex-direction: column;
        .title{
          flex:1 0 40px;
          padding: 12px 0 12px 10px;
          color:#000;
          font-weight: 700;
          border-bottom:2px solid #ccc;
        }
        .ordercontent{
          flex:4 0 160px;
          display: flex;
          align-items: center;
          div{

            flex:1;
            box-shadow: none;
            border: none;
            color:gray;
            font-size: 14px;
            p{
              margin-bottom: 10px;;
            }
            span{
              // margin-top: 10px;
              // display: block;
            }
          }

        }
      }
      .quickentrance{
        display: flex;
         .title{
          flex:1 0 40px;
          padding: 12px 0 12px 10px;
          color:#000;
          font-weight: 700;
          border-bottom:2px solid #ccc;
        }
        .links{
          flex:4 0 160px;
          display: flex;
          justify-content: center;
          align-items: center;

        }
      }
    }
  }
</style>